import React from 'react';
import Chart from 'echarts-for-react';
import {environmentalEmissionIndicatorsStatistics} from '../../../services/cockpit'

// let data = {
//     value:[
//             {
//                 series: [
//                     {
//                         data:[{
//                             value : [15000, 10000, 28000, 35000, 50000, 19000,50000],
//                             name : '环保排放指标统计数据'
//                         }]
//                     }
//                 ],
//             },
//             {
//                 series: [
//                     {
//                         data:[{
//                             value : [15000, 30000, 28000, 35000, 50000, 19000,50000],
//                             name : '环保排放指标统计数据'
//                         }]
//                     }
//                 ],
//             },
//         ],
//     time:['01-01','01-02'],
//     indicator: [
//         { name: '颗粒物', max: 120},
//         { name: '氮氧化物', max: 300},
//         { name: '氯化氢', max: 10},
//         { name: '一氧化碳', max: 10},
//         { name: '扬尘', max: 200},
//         { name: '异味', max: 30},
//         { name: '噪音', max: 70}
//     ]
// };

class MyRadar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: '',
        };
    }
    componentDidMount() {

        environmentalEmissionIndicatorsStatistics().then(data => {
            let dataList = data.data.ret;
            this.setState({
                dataList
            })
        })
    }
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        baseOption: {
            textStyle:{color:'#fff'},
            color:['rgb(27, 138, 124)','#3A91B2','#4472C5',],
            tooltip: {},
            timeline: {
             top:220,
                left:20,
                right:20,
                axisType: 'category',
                // realtime: false,
                // loop: false,
                autoPlay: true,
                // currentIndex: 2,
                playInterval: 3000,
                symbol:'circle',
                lineStyle:{
                    color:'#385883'
                },
                label:{color:'#fff'},
                itemStyle:{
                    color:'#385883'
                },
                checkpointStyle:{
                    color:'#fff',
                    borderColor:'#385883'
                },
                controlStyle:{
                    color:'#385883'
                },
                data: data.time,
            },
            grid:{
                position:'top',
                top:20
            },
            radar: {
                radius:'60%',
                axisLine:{
                    show:false
                },
                splitLine:{
                    lineStyle:{
                        color:['#2BDDC2','#5BBEF2','#5BBEF2','#5BBEF2'],
                        width:2,
                    },
                },
                center:['50%','45%'],
                splitArea:{
                    show:false
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                // indicator: [
                //     { name: '颗粒物', min: 50},
                //     { name: '噪音', min: 60},
                //     { name: '异味', min: 20},
                //     { name: '扬尘', min: 60},
                //     { name: '一氧化氮', min: 3},
                //     { name: '氯化氢', min: 2},
                //     { name: '氮氧化物', min: 120},
                // ],
                // indicator: [
                //     { name: '颗粒物'},
                //     { name: '噪音'},
                //     { name: '异味'},
                //     { name: '扬尘'},
                //     { name: '一氧化氮'},
                //     { name: '氯化氢'},
                //     { name: '氮氧化物'},
                // ],
                indicator:data.indicator,
            },
            series: [{
                type: 'radar',
                position:'top',
                top:20,
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#3A91B2',}}},
               
            }],
            legend: { enabled: true,
                name: '环保标准',
                color: 'rgba(51,0,255,1)',
               
                textStyle:{
                    color:'#fff'
                },
            right:10
            },
            // legend: {
            //    type:"plain",
            //    title:"环保标准"
            // },
        },
        options: data.value
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 270 }}
                />
            </div>
        )
    }
}
export default MyRadar;
